/* eslint-disable react/react-in-jsx-scope */
import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
// 使用lodash
import { differenceBy } from 'lodash'
import { useState } from 'react'

import { addChannel, changeActive, delChannel } from '@/store/actions/home'
import { Channel } from '@/types/data'
import { Toast } from 'antd-mobile'

type Props ={
  hide:()=>void
}
const Channels = ({ hide }:Props) => {
  const dispatch = useDispatch()
  const { userChannels, active } = useSelector((state:RootState) => state.home)
  // console.log(userChannels, 789)
  const optionChannel = useSelector((state:RootState) => {
    // 推荐频道 = 所有频道 - 我的频道
    const { userChannels, allChannels } = state.home
    // return allChannels.filter(it => {
    //   const idx = userChannels.findIndex(v => v.id === it.id)
    //   if (idx === -1) {
    //     return true
    //   } else {
    //     return false
    //   }
    // })
    return differenceBy(allChannels, userChannels, 'id')
  })
  // 是否是编辑状态
  const [isEdit, setIsEdit] = useState(false)
  const changeEdit = () => {
    setIsEdit(!isEdit)
  }
  // 添加频道函数
  const onAddChannel = (channel:Channel) => {
    dispatch(addChannel(channel))
  }
  // 判断是否可以做删除
  const canDel = (id: number) => {
    if (id === 0) { // 推荐
      Toast.show('推荐不能删除')
      return false
    }
    if (id.toString() === active) {
      Toast.show('当前频道不能删除')
      return false
    }
    if (userChannels.length <= 4) {
      Toast.show('最少保留4个频道')
      return false
    }
    return true
  }
  console.log(userChannels.length, 111)

  // 用户点击 我的频道 中某一项
  // 1. 当isEdit为true， 做删除
  // 2. 当isEdit为false, 做 切换频道
  const click = async (id:number) => {
    if (isEdit) {
      if (!canDel(id)) {
        return
      }
      await doDelChannel(id)
      Toast.show('删除成功')
    } else {
      dispatch(changeActive(id.toString()))
      // 关闭弹层
      hide()
    }
  }
  const doDelChannel = (id: number) => {
    dispatch(delChannel(id))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {isEdit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={changeEdit}>
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          {/* 这里放置我的频道 */}
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}

            {userChannels.map(item => (
            // eslint-disable-next-line no-undef
            <span onClick={ () =>
              // if (isEdit) {
              //   // 编辑状态，点击要做删除
              //   if (userChannels.length <= 4) {
              //     Toast.show('再删就没了')
              //     return
              //   }
              //   dispatch(delChannel(item.id))
              //   Toast.show('删除成功')
              // } else {
              //   // 切换频道
              //   // 隐藏弹层
              //   hide()
              //   // 跳转频道
              //   dispatch(changeActive(item.id.toString()))
              // }
              click(item.id)
          } key={item.id} className={classnames(
            'channel-list-item',
            item.id.toString() === active ? 'selected' : ''
          )}>
              {item.name}
             {(item.id !== 0 && item.id.toString() !== active) && <Icon type="iconbtn_tag_close" />}
            </span>))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>

          {/* 这里放置推荐频道 */}
          <div className="channel-list">
            {optionChannel.map(it => (
            <span onClick={() => onAddChannel(it)} className="channel-list-item" key={it.id}>
              + {it.name}
            </span>))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
